<template>
  <div>
    <!-- 头部图片 -->
    <header class="rel" v-if="list.imageURL">
      <img :src="`https://img.villaday.com${list.imageURL}`" alt>
      <div class="fff fcc abs show" :class="{onShow:show}" @click="show=!show;getList()">
        <i class="iconfont iconhart abs"></i>
      </div>
      <p class="fff fcc abs">
        <span class="f12">￥</span>
        <span class="f18">{{list.minPrice/100}}</span>
        <span class="f12 ml-5">起 人均:￥109</span>
      </p>
    </header>

    <!-- 文字描述 -->
    <div class="text bg-fff">
      <p class="top f18">
        <span class="weight pl-10">{{list.name}}</span>
        <span class="self fff f12 ml-15">自助式服务</span>
      </p>
      <p class="center f14 flex jc-sb aic">
        <span>8室3厅5卫·500㎡·10床·20人</span>
        <span>房屋编号：{{list.houseNo}}</span>
      </p>
      <p class="bottom f12">
        <span>温泉别墅</span>
        <span>轻奢度假</span>
        <span>团建别墅</span>
      </p>
    </div>

    <!-- 地理位置 -->
    <div class="address bg-fff mt-10">
      <p class="area f14">
        <span class="pl-5">地理位置</span>
      </p>
      <p class="f12 flex jc-sb aic padding">
        <i class="iconfont iconlocation color"></i>
        <span class="fg1">{{list.street}}</span>
        <span class="color">查看地图</span>
      </p>
    </div>

    <!-- 底部按钮 -->
    <footer class="fixed flex w100pc f14">
      <div class="bg-fff service fcc">
        <i class="iconfont iconmy"></i>
        <span>咨询客服</span>
        <i class="iconfont iconxiala"></i>
      </div>
      <router-link
        :to="`/goods/chooseDate/${list.houseId}/${list.minPrice}`"
        class="price fff fcc"
      >查看价格·预定</router-link>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      collection: {},
      list: {}
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    async getDetail() {
      this.$loading();
      let houseId = this.$route.query.houseId;
      let data = {
        houseId
      };
      let url = "/house/getDetail";
      try {
        let res = await this.$axios.post(url, data);
        this.list = res.data;
      } catch (error) {}
      this.$clear();
    },
    async getList() {
      if (this.show === true) {
        let url = "/collection/add";
        let houseId = this.$route.query.houseId;
        let data = {
          houseId
        };
        let res = await this.$axios.post(url, data);
        // console.log(res);
        this.$toast.success("收藏成功");
      } else {
        let url = "/collection/cancel";
        let houseId = this.$route.query.houseId;
        let data = {
          houseId
        };
        let res = await this.$axios.post(url, data);
        // console.log(res);
        this.$toast.success("取消收藏");
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../style/goodsDetail";
</style>

